<template>
	<view class="">
		<view class="details" v-if="list.length != 0">
			<view class="title">
				<span>玩家市场</span>
				<!-- 转账记录 -->
				<view class="history-img" @click="tohistory">
				</view>
			</view>
			<view class="list_item">
				<image class="item-img" :src="list[0].detailImages" mode="aspectFill"></image>
				<view class="item">
					<view class="user">
						{{ list[0].name }}
					</view>
					<view class="item-price">
						市场价:{{ list[0].moneyPrice }}镇北币
					</view>
					<view class="item-date">
						发布时间：{{ list[0].startingTime }}
					</view>
				</view>
			</view>
			<view class="item-02">
				<!-- 			<view :class="sortType === 1?'active':''" @click="getDedails(1)">
				按价格升序
			</view>
			<view :class="sortType === 2?'active':''" @click="getDedails(2)">
				按价格降序
			</view> -->
				<view :class="{ 'active': type === 'price' }" @click="toggleSortType()">
					{{ sortType === 1 ? '按价格升序' : '按价格降序' }}
					<text class="arrow">{{ sortType === 1 ? '\u25B2' : '\u25BC' }}</text>
				</view>
				<view :class="{ 'active': type === 'time' }" @click="toggleSortTypeTime()">
					{{ sortTypeTime === 1 ? '按发布时间升序' : '按发布时间降序' }}
					<text class="arrow">{{ sortTypeTime === 1 ? '\u25B2' : '\u25BC' }}</text>
				</view>

			</view>
			<view class="details-user">
				<view class="item-03" v-for="(item, index) in list" :key="index">
					<view class="item-top">
						<view class="left">
							<image class="headimg" :src="item.sellerHeadimg" mode="aspectFill"></image>
							<view class="">
								{{ item.sellerName }}
							</view>
						</view>
						<view class="right">
							成交价:{{ item.transactionPrice }}镇北币
						</view>
					</view>
					<view class="item-bottom">
						<view class="date">
							发布：{{ item.startingTime }}
						</view>
						<view class="item-btn" @click="showDalog(item.id, item.transactionPrice)">
							立即购买
						</view>
					</view>
				</view>
			</view>
			<view v-if="isDialogVisible" class="masks" @click="hideDialog"></view>
			<view v-if="isDialogVisible" class="dialog">
				<view class="content">
					<view class="con-ts">
						提示
					</view>
					<view class="con-tt">
						购买后，无法退回，请确认后购买
					</view>
					<view class="con-btn">
						<view class="btn" @click="shoDlog()">
							再想想
						</view>
						<view class="btn" @click="pay()">
							立即购买
						</view>
					</view>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom">
				<view class="pay">
					<h3>{{ list[0].name }}</h3>
					<view class="price">
						<text>单价：</text>
						<text>{{ transactionPrice }}镇北币</text>
					</view>
					<view class="price">
						<text>是否匿名购买：</text>
						<checkbox color="#6C40FF" background-color="#fff" border-color="#6C40FF"
							activeBackgroundColor="#fff" activeBorderColor="#6C40FF" :checked="isselect"
							@click="selected()" />
					</view>
					<!-- 	<view class="agree">
						<text>
						<checkbox color="#6C40FF" background-color="#fff" border-color="#6C40FF"
							activeBackgroundColor="#fff" activeBorderColor="#6C40FF" />
						</text>
						我已阅读并同意<u>《用户使用协议》</u>
					</view> -->
					<view class="button" @click="payment">
						确认购买
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="details-null" v-else>
			<image src="../../static/manghe/null.png" mode=""></image>
			<view class="details-text">
				暂无转让商品
			</view>
		</view>
	</view>

</template>

<script>
import {
	$getStorage,
	$setStorage,
	$removeStorage
} from "@/utils/auth.js";
export default {
	data() {
		return {
			skuId: '',
			list: [],
			isDialogVisible: false,
			resaleOrderIds: '',
			transactionPrice: '',
			isselect: false,
			sortType: 1,
			sortTypeTime: 1,
			type: 'price'
		}
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo
		}
	},
	onLoad(e) {
		this.skuId = e.skuId
	},
	onShow() {
		this.getDedails()
	},

	methods: {
		toggleSortType() {
			this.type = 'price';
			this.sortType = this.sortType === 1 ? 2 : 1;
			this.getDedails(this.sortType);
		},
		toggleSortTypeTime() {
			this.type = 'time';
			this.sortTypeTime = this.sortTypeTime === 1 ? 2 : 1;
			this.getDedails(this.sortTypeTime);
		},
		getDedails(num) {
			// this.sortType = num;
			this.$http('/sale/selectBySkuId', "get", {
				skuId: this.skuId,
				ascOrDesc: num,
				type: this.type,
			}).then(res => {
				this.list = res.data.list
				this.list.map(item => {
					const date = new Date(item.startingTime);
					const formattedDate = date.toLocaleString();
					item.startingTime = formattedDate
				})
			})
		},
		selected() {
			this.isselect = !this.isselect;
		},
		// 外层点击立即购买展示弹框
		showDalog(id, price) {
			this.isDialogVisible = true
			this.resaleOrderIds = id
			this.transactionPrice = price
		},
		// 再想想关闭弹框
		shoDlog() {
			this.isDialogVisible = false
		},
		hideDialog() {
			this.isDialogVisible = false
		},
		tohistory() {
			uni.navigateTo({
				url: "/pages/playerTrading/transfer"
			})
		},
		toIndex() {
			uni.switchTab({
				url: "/pages/playerTrading/index"
			})
		},
		// 点击立即购买
		pay() {
			this.$refs.popup.open('bottom')
			this.isDialogVisible = false
		},
		payment() {
			this.$http('/sale/pay', "post", {
				userId: this.userInfo.id,
				anonymity: this.isselect ? 1 : 0,
				resaleOrderIds: [this.resaleOrderIds]
			}).then(res => {
				if (res.code == 200) {
					this.$refs.popup.close()
					uni.showToast({
						title: "支付成功",
						icon: 'none',
						duration: 3000,
					});
					setTimeout(() => {
						this.toIndex();
					}, 1000)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 4000,
					});
				}

			})
		}
	}
}
</script>

<style scoped lang="scss">
page {
	background: url(../../static/bgColor.png) center/ cover no-repeat;

	.masks {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		/* 半透明黑色遮罩层 */
		z-index: 99;
		/* 比弹框的z-index小 */
	}



	.dialog {
		width: 600rpx;
		height: 400rpx;
		position: fixed;
		top: 20%;
		left: 10%;
		background: rgba(36, 5, 108, 0.6);
		border: 3rpx solid rgb(115, 55, 253);
		color: #fff;
		z-index: 100;
		border-radius: 20rpx;
	}

	.pay {
		width: 100%;
		height: 400rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 30rpx 0;

		h3 {
			margin: 30rpx 0 50rpx;
			text-align: center;
			color: #000;
		}

		.price {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}

		.button {
			width: 560rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin: 30rpx auto;
			font-weight: 900;
			font-size: 35rpx;
			text-align: center;
			border-radius: 15rpx;
			color: #fff;
			background: url(../../static/seach.png) center/ cover no-repeat;
		}
	}

	.content {
		position: relative;
		z-index: 101;
		/* 确保内容层在遮罩层上方 */
		text-align: center;

		.con-ts {
			font-size: 50rpx;
			margin: 50rpx 0 40rpx 0;
		}

		.con-tt {
			font-size: 35rpx;
		}

		.con-btn {
			width: 500rpx;
			margin: 60rpx auto;
			display: flex;
			justify-content: space-around;

			.btn {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: rgb(108, 67, 255);
				border-radius: 20rpx;
			}
		}
	}

	.details {
		width: 100%;
		height: 100vh;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		overflow-y: hidden;
		display: flex;
		flex-direction: column;

		.details-null {
			image {
				width: 250rpx;
				height: 250rpx;
				margin-top: 400rpx;
				margin-left: 250rpx;
			}

			.details-text {
				text-align: center;
				margin-top: 50rpx;
				color: #fff;
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 90rpx;
			height: 100rpx;
			position: relative;

			span {
				font-weight: 900;
				color: #f3d26e;
				font-size: 35rpx;
				background: url('../../static/manghe/top.png');
				background-size: 100%;
				background-repeat: no-repeat;
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
			}

			.history-img {
				width: 60rpx;
				height: 60rpx;
				background: url(../../static/manghe/history.png) center/ contain no-repeat;
				position: absolute;
				right: 14rpx;
				top: 50rpx;
			}
		}


		.list_item {
			width: 650rpx;
			height: 250rpx;
			background: url(../../static/manghe/itemcard.png) center/ contain no-repeat;
			padding: 20rpx;
			display: flex;

			.item-img {
				width: 240rpx;
				height: 240rpx;
			}

			.item {
				margin-left: 20rpx;

				.user {
					width: 400rpx;
					color: #fff;
					margin-top: 30rpx;
					font-size: 33rpx;

				}

				.item-price {
					width: 80%;
					height: 50rpx;
					margin: 20rpx 0;
					color: rgb(130, 238, 239);
					background-color: rgb(65, 71, 97);
					border-radius: 30rpx;
					text-align: center;
					line-height: 50rpx;
				}

				.item-date {
					color: #fff;
					font-size: 27rpx;
				}
			}
		}

		.item-02 {
			width: 650rpx;
			height: 80rpx;
			background: url(../../static/manghe/Rectangle.png) center/ contain no-repeat;
			padding: 20rpx;
			margin: 10rpx 0;
			color: #fff;
			display: flex;
			font-size: 35rpx;
			align-items: center;
			justify-content: space-around;

			.active {
				color: #f3d26e;
			}
		}

		.details-user {
			overflow-y: auto;

			.item-03 {
				width: 650rpx;
				height: 250rpx;
				background: url(../../static/manghe/itemcard.png) center/ contain no-repeat;
				padding: 20rpx;
				color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-top {
					display: flex;
					justify-content: space-between;

					.left {
						width: 250rpx;
						display: flex;
						align-items: center;

						.headimg {
							width: 80rpx;
							height: 80rpx;
							flex-shrink: 0;
							border-radius: 50%;
							margin-right: 30rpx;
						}
					}
				}

				.item-bottom {
					display: flex;
					justify-content: space-between;

					.item-btn {
						width: 180rpx;
						height: 60rpx;
						background: rgb(126, 84, 255);
						border-radius: 10rpx;
						text-align: center;
						line-height: 60rpx;
					}
				}
			}
		}

	}

}
</style>